

<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>OR Media Anesthesia Module</title>
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
		<style type="text/css">
			body, html {
				width:100%;
				height:100%;
				background-color:#555;
				position:absolute;
				margin:0;
				padding:0;
			}
			.content {
				box-sizing:border-box;
				min-width:1200px;
				margin:20px;
				padding:0.5cm;
				color:white;
				background-color:#111;
			}
			tr td {
				border-bottom:#333;
			}
			.yellow {
				color:#ffD700;
			}
			table.tdpad td {
				padding:10px;
			}
			table {
				color:white;
			}
			.formtitle {font-size:20px;font-weight:bold}
			.underline {text-decoration:underline;}
			.textpad {padding-left:10px;padding-right:10px;}
			.w3-bold {font-weight:bold;}
			.verticaltext{writing-mode:vertical-rl;text-orientation: upright;}
			.redslot {
				border:solid red 2px;
				border-radius:10px;
				background-color:rgba(255,0,0,0.3);
				color:white;
				font-weight:bold;
				text-align:center;
				line-height:20px;
				padding-top:4px;
				padding-bottom:4px;
			}
			table.tdborder td {
				border:1px solid #666;
			}
			.w3-input {height:22px;}
		</style>
				<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.js"></script>
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.css"></link>
	</head>
	<body>
		<div class="content">
			<div class="w3-text-white" style="padding-top:10px; font-size:20px;padding-bottom:10px">Anesthesia Info Module</div>
			<table width="100%">
				<tr rel="data-fentayl"><td class="yellow">Fentanyl</td><td>450</td><td class="yellow">ug</td><td><span style="padding-right:100px">100</span>100<span style="padding-left:30px">100</span><span style="padding-left:100px">100</span></td></tr>
				<tr rel="data-fentayl"><td class="yellow">Rocuronium</td><td>300</td><td class="yellow">mg</td><td>200</td></tr>
				<tr rel="data-fentayl"><td class="yellow">Propoful</td><td>100</td><td class="yellow">mg</td><td><div id=""></div></td></tr>
				<tr rel="data-fentayl"><td class="yellow">Isofluorine</td><td></td><td class="yellow">%</td><td><div id=""></div></td></tr>
				<tr rel="data-fentayl"><td class="yellow">O<sub>2</sub></td><td>1100.25</td><td class="yellow">L</td><td><div id=""></div></td></tr>
				<tr rel="data-fentayl"><td class="yellow">Air</td><td>540</td><td class="yellow">L</td><td><div id=""></div></td></tr>
				<tr>
					<td colspan="2"></td>
					<td></td>
				</tr>
				<tr>
					<td colspan="2">
						<div class="redslot larget">
							<div class="title">Arterial</div>
							<div class="data">130/67 102</div>
						</div>
						<div class="redslot">
							<div class="title">HR</div>
							<div class="data">63</div>
						</div>
						<div class="redslot">
							<div class="title">BP</div>
							<div class="data">81</div>
						</div>
						<div class="redslot">
							<div class="title">EtCO<sub>2</sub></div>
							<div class="data">30.8</div>
						</div>
						<div class="redslot">
							<div class="title">SpO<sub>2</sub></div>
							<div class="data">91.6</div>
						</div>
						<div class="redslot">
							<div class="title">RR</div>
							<div class="data">13</div>
						</div>
						<div class="redslot">
							<div class="title">FiO<sub>2</sub></div>
							<div class="data">81</div>
						</div>
						<div class="redslot">
							<div class="title">TV</div>
							<div class="data">540</div>
						</div>
						<div class="redslot">
							<div class="title">Tgen</div>
							<div class="data">96.8</div>
						</div>
					</td>
					<td colspan="2"><canvas id="sysChart"></canvas></td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			var timer;
			function stopData() {
				clearInterval(timer);
			}
			function resumeData() {
				stopData();
				timer = setInterval(readData,5000);
			}
			var timestamp = ['2020-05-20 16:13:31','2020-05-20 16:13:36','2020-05-20 16:13:41','2020-05-20 16:13:46','2020-05-20 16:13:51','2020-05-20 16:13:56','2020-05-20 16:14:01','2020-05-20 16:14:06','2020-05-20 16:14:11','2020-05-20 16:14:16','2020-06-01 19:56:56','2020-06-01 19:57:07','2020-06-01 19:57:11','2020-06-01 19:57:14','2020-06-01 19:57:17','2020-06-01 19:57:20','2020-06-01 19:57:23','2020-06-01 19:57:26','2020-06-01 19:57:30','2020-06-01 19:57:35'];
			var timestamplbls = ['16:13:31','16:13:36','16:13:41','16:13:46','16:13:51','16:13:56','16:14:01','16:14:06','16:14:11','16:14:16','19:56:56','19:57:07','19:57:11','19:57:14','19:57:17','19:57:20','19:57:23','19:57:26','19:57:30','19:57:35'];
			Chart.defaults.global.legend.display = false;

			var sys = [0,0,0,0,0,0,0,0,0,0,95,102,115,114,115,99,95,102,108,106];
			var dia = [0,0,0,0,0,0,0,0,0,0,73,79,91,92,82,64,66,69,86,67];
			var pulse = [24,147,124,81,166,70,111,80,111,26];
			var sysChart = new Chart(document.getElementById('sysChart').getContext('2d'), {
			    type: 'line',
			    data: {
			        labels: timestamplbls,
			        datasets: [{
			            label: 'NPB (Sys mmHg)',
			            data: sys,
			            borderWidth: 5,
			            borderColor:'rgba(50,150,150, 0.4)',
			            fill: false
			        },
			        {
			            label: 'NPB (Dia mmHg)',
			            data: dia,
			            borderWidth: 5,
			            borderColor:'rgba(50,0,150, 0.4)',
			            fill: false
			        },
			         {
			            label: 'Pulse',
			            data: pulse,
			            borderWidth: 5,
			            borderColor:'rgba(160,70,170, 0.4)',
			            fill: false
			        }
			       ],

			    },
			    options: {
			        scales: {
			            yAxes: [{
			                ticks: {
			                    suggestedMin: 60,
			                    suggestedMax: 180
			                }
			            },{
			                ticks: {
                                 name: '降水量',
			                    suggestedMin: 120,
			                    suggestedMax: 250
			                }
			            }],
			            xAxes: [{
			            	 gridLines:{
			                	display:true,
			                	color: 'white',
			                	fontColor: 'yellow'
			               },
			                ticks: {
			                    beginAtZero:true,
			                    fontSize: 20,
			                    fontColor: 'yellow'
			                },
			               position: 'top',

			            }]
			        },
			        aspectRatio: 6
			    }
			});
			function addData(chart, label, data, status, idx) {
			if (label!="") {
				console.log(label.replace(/.* /,""));
				timestamp.push(label);
		    	chart.data.labels.push(label.replace(/.* /,""));

		   	}
    		chart.data.datasets[idx].data.push(data);

    		if (status!=0) {

    		}
    		chart.update();
		}
		function removeData(chart, label) {
			if (label!="") {
				timestamp.shift();
				chart.data.labels.shift();
			}
			chart.data.datasets.forEach((dataset) => {
			    dataset.data.shift();
			});
		}
		function readData() {
			//console.log(timestamp[timestamp.length-1]+' length: '+timestamp.length);
			jQuery.ajax({
				'url':'https://thekonnect.com.hk/tko-drager/',
				'method':'POST',
				'data':'action=getData&timestamp='+timestamp[timestamp.length-1]
			}).done(function(d) {
				if (d!="") {
					var data = JSON.parse(d);
					for (var i = 0; i < data.length; i++) {
						var code = data[i].data;
						for (var j = 0; j < code.length; j++) {
							if (code[j].code=="5b") {
								addData(sysChart,data[i].timestamp, code[j].value, code[j].status,0);
								//document.getElementById('sysValue').innerHTML =code[j].value;
							} else if (code[j].code=="5c") {
								addData(sysChart,"", code[j].value, code[j].status,1);
								//document.getElementById('diaValue').innerHTML =code[j].value;
							} else if (code[j].code=="5d") {
								//addData(meanChart,"", code[j].value, code[j].status);
								//document.getElementById('meanValue').innerHTML =code[j].value;
							} else if (code[j].code=="64") {
								//addData(spo2Chart,"", code[j].value, code[j].status);
								//document.getElementById('spo2Value').innerHTML =code[j].value;
							} else if (code[j].code=="65") {
								addData(sysChart,"", code[j].value, code[j].status,2);
								//document.getElementById('pulseValue').innerHTML =code[j].value;
							}
						}
						var max = timestamp.length;
						if (max > 20) {
							for (var k = 20; k < max ; k++) {
								removeData(sysChart,"timestamp");
								/*
								removeData(diaChart,"");
								removeData(meanChart,"");
								removeData(spo2Chart,"");
								removeData(pulseChart,"");		*/
							}
							sysChart.update();
							/*
							diaChart.update();
							meanChart.update();
							spo2Chart.update();
							pulseChart.update();*/
						}
					}
				}
			});
		}
		timer = setInterval(readData,5000);
		</script>
	</body>
</html>
